<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="50">
				<el-col :span="20">
					<el-input
						placeholder="请输入内容"
						v-model="queryInfo.query"
						clearable
						@clear="getUserList"
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="getUserList"
						></el-button> </el-input
				></el-col>
				<el-col :span="4">
					<el-button type="primary" @click="dialogVisible = true">
						添加用户
					</el-button>
				</el-col>
			</el-row>
			<el-table :data="userList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="姓名" prop="username"></el-table-column>
				<el-table-column label="邮箱" prop="email"></el-table-column>
				<el-table-column label="电话" prop="mobile"></el-table-column>
				<el-table-column label="角色" prop="role_name"></el-table-column>
				<el-table-column label="状态" prop="mg_state">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.mg_state"
							@change="userStateChanger(scope.row)"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180px">
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="mini"
							@click="showEditDialog(scope.row.id)"
						></el-button>
						<!-- 删除按钮 -->
						<el-button
							type="danger"
							icon="el-icon-delete"
							size="mini"
							@click="removeUserById(scope.row.id)"
						></el-button>
						<!-- 分配按钮 -->
						<el-tooltip
							effect="dark"
							content="分配角色"
							placement="top"
							:enterable="false"
						>
							<el-button
								type="warning"
								icon="el-icon-setting"
								size="mini"
								@click="showSetRightDialog(scope.row)"
							></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[1, 2, 3, 4, 5]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
			<!-- 添加用户对话框 -->
			<el-dialog
				title="添加用户"
				:visible.sync="dialogVisible"
				width="50%"
				@close="addDialogClosed"
			>
				<el-form
					:model="addForm"
					:rules="addFormRules"
					ref="addFormRef"
					label-width="70px"
					><el-form-item label="用户名" prop="username"
						><el-input v-model="addForm.username"></el-input
					></el-form-item>
					<el-form-item label="密码" prop="password"
						><el-input v-model="addForm.password"></el-input
					></el-form-item>
					<el-form-item label="邮箱" prop="email"
						><el-input v-model="addForm.email"></el-input
					></el-form-item>
					<el-form-item label="手机号" prop="mobile"
						><el-input v-model="addForm.mobile"></el-input
					></el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="addUser">确 定</el-button>
					<el-button @click="dialogVisible = false">取 消</el-button>
				</span>
			</el-dialog>
			<!-- 修改用户对话框 -->
			<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
				<el-form
					:model="editForm"
					:rules="addFormRules"
					ref="editFormRef"
					label-width="70px"
					><el-form-item label="用户名"
						><el-input v-model="editForm.username" disabled></el-input
					></el-form-item>
					<el-form-item label="邮箱" prop="email"
						><el-input v-model="editForm.email"></el-input
					></el-form-item>
					<el-form-item label="手机号" prop="mobile"
						><el-input v-model="editForm.mobile"></el-input
					></el-form-item>
				</el-form>
				<span slot="footer">
					<el-button type="primary" @click="editUserInfo">确 定</el-button>
					<el-button @click="editDialogVisible = false">取 消</el-button>
				</span>
			</el-dialog>
			<!-- 分配角色 -->
			<el-dialog
				title="分配角色"
				:visible.sync="setRightDiaLogVisible"
				width="50%"
				@close="editRoleDialogClosed"
			>
				<div>
					<p>用户：{{ userInfo.username }}</p>
					<p>角色：{{ userInfo.role_name }}</p>
					<p>
						分配角色：<el-select v-model="selectedRoleId" placeholder="请选择">
							<el-option
								v-for="item in rolesList"
								:key="item.id"
								:label="item.roleName"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="assignRoles">确 定</el-button>
					<el-button @click="setRightDiaLogVisible = false">取 消</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>
<script>
export default {
	data() {
		// 自定义邮箱验证规则
		var checkEmail = (rule, value, callback) => {
			const regEmail =
				/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/
			if (regEmail.test(value)) {
				return callback()
			}
			callback(new Error('请输入合法的邮箱'))
		}
		// 自定义手机号的验证规则
		var checkMobile = (rule, value, callback) => {
			const regMobile = /(^1\d{10}$)|(^[0-9]\d{7}$)/
			if (regMobile.test(value)) {
				return callback()
			}
			callback(new Error('请输入正确的手机号'))
		}
		return {
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 2,
			},
			setRightDiaLogVisible: false,
			userList: [],
			total: 0,
			dialogVisible: false,
			editDialogVisible: false,
			addForm: {
				username: '',
				password: '',
				email: '',
				mobile: '',
			},
			addFormRules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					},
					{
						min: 3,
						max: 10,
						message: '用户名在3到10个字符之间',
						trigger: 'blur',
					},
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
					{
						min: 6,
						max: 15,
						message: '密码在6到15个字符之间',
						trigger: 'blur',
					},
				],
				email: [
					{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur',
					},
					{
						validator: checkEmail,
						trigger: 'blur',
					},
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur',
					},
					{
						validator: checkMobile,
						trigger: 'blur',
					},
				],
			},
			editForm: {},
			userInfo: {},
			rolesList: [],
			selectedRoleId: '',
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		async getUserList() {
			const { data: res } = await this.$http.get('users', {
				params: this.queryInfo,
			})
			if (res.meta.status != 200) {
				return this.$message.error('获取用户列表失败')
			}
			this.userList = res.data.users
			this.total = res.data.total
		},
		// 监听pagesize改变
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize
			this.getUserList()
		},
		// 监听页码值改变
		handleCurrentChange(newNum) {
			this.queryInfo.pagenum = newNum
			this.getUserList()
		},
		// 监听状态的改变
		async userStateChanger(userInfo) {
			const { data: res } = await this.$http.put(
				`users/${userInfo.id}/state/${userInfo.mg_state}`
			)
			if (res.meta.status != 200) {
				userInfo.mg_state = !userInfo.mg_state
				return this.$message.error('更新用户状态失败')
			}
			this.$message.success('更新用户状态成功')
		},
		addDialogClosed() {
			this.$refs.addFormRef.resetFields()
		},
		// 添加用户
		addUser() {
			this.$refs.addFormRef.validate(async (valid) => {
				if (!valid) {
					return
				}
				const { data: res } = await this.$http.post('users', this.addForm)
				if (res.meta.status != 201) {
					return this.$message.error('添加用户失败')
				}
				this.$message.success('添加用户成功')
				this.dialogVisible = false
				this.getUserList()
			})
		},
		async showEditDialog(id) {
			const { data: res } = await this.$http.get('users/' + id)
			if (res.meta.status != 200) {
				return this.$message.error('查询用户信息失败')
			}
			this.editForm = res.data
			this.editDialogVisible = true
		},
		editUserInfo() {
			this.$refs.editFormRef.validate(async (valid) => {
				if (!valid) {
					return
				}
				const { data: res } = await this.$http.put(
					'users/' + this.editForm.id,
					{
						email: this.editForm.email,
						mobile: this.editForm.mobile,
					}
				)
				if (res.meta.status != 200) {
					return this.$message.error('修改用户信息失败')
				}
				this.$message.success('修改用户信息成功')
				this.editDialogVisible = false
				this.getUserList()
			})
		},
		// 删除用户
		async removeUserById(id) {
			const confirmResult = await this.$confirm(
				'此操作将永久删除该用户, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).catch((err) => {
				return err
			})
			if (confirmResult != 'confirm') {
				return this.$message.info('已取消删除')
			}
			const { data: res } = await this.$http.delete('users/' + id)
			if (res.meta.status != 200) {
				return this.$message.error('删除用户失败')
			}
			this.$message.success('删除用户成功')
			this.getUserList()
		},
		// 分配角色
		async showSetRightDialog(userInfo) {
			const { data: res } = await this.$http.get('roles')
			if (res.meta.status != 200) {
				return this.$message.error('获取角色失败')
			}
			this.rolesList = res.data
			this.setRightDiaLogVisible = true
			this.userInfo = userInfo
		},
		async assignRoles() {
			if (!this.selectedRoleId) {
				return this.$message.error('请选择新的角色')
			}
			const { data: res } = await this.$http.put(
				`users/${this.userInfo.id}/role`,
				{ rid: this.selectedRoleId }
			)
			if (res.meta.status != 200) {
				return this.$message.error('分配角色失败')
			}
			this.getUserList()
			this.setRightDiaLogVisible = false
			this.$message.success('分配角色成功')
		},
		editRoleDialogClosed() {
			this.selectedRoleId = ''
			this.userInfo = {}
		}
	},
}
</script>
<style lang="less" scoped></style>
